<template>
  <div>
  <h4><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>&nbsp;&nbsp;热门课程</h4>
  <!--在线课程-->
  <div class="class_online">
    <div class="row">
      <div class="col-md-3 col a_list_of_class" v-for="n in courseColumnsNumber">
        <ul>
          <li v-for="n1 in courseLevel">
            <div class="one_class">
              <div class="thumbnail">
                <img src="static/pic/carousel/2.jpg" class="one_class_pic">
                <div class="caption">
                  <h4 class="text-center">PHP代码审计<small>&nbsp;&nbsp;网络安全</small></h4>
                  <p>
                    讲师：胡菜鸟{{n-n1}}
                    <span class="glyphicon glyphicon-king" style="float: right;">高级</span>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <p class="text-center"> <button type="button" class="btn btn-info" style="width: 30%;">更多课程</button></p>
  </div>
  <!--在线课程end-->
  </div>
</template>

<script>
  export default {
    name: 'courseList',
    props: ['courseLevel', 'courseColumnsNumber'],
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

